//首页 基础布局页面组件

import React from "react";
import { Layout, Menu, Icon } from "antd";
import { Switch, Route } from "react-router-dom";
//欢迎 用户页
import Welcome from "../pages/Welcome";
// 两个组件
import UserManageList from "../pages/UserManage/List";
import UserManageAuth from "../pages/UserManage/Auth";

// 引入样式
import "./BaseLayout.scss";
// 配置组件环境
// 从antd组件上取出 解构所需的
const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;

class BaseLayout extends React.Component {
  render() {
    return (
      <Layout className="base-layout">
        <Sider>
          <div className="logo" />
          {/* 主题颜色 初始选中的菜单项 key 数组   菜单类型，现在支持垂直、水平、和内嵌模式三种*/}
          {/* key item 的唯一标志 */}
          <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
            <Menu.Item key="1" onClick={this.hanldeMenuLink.bind(this, "/")}>
              <Icon type="pie-chart" />
              <span>Welcome</span>
            </Menu.Item>

            <SubMenu
              key="sub1"
              title={
                <span>
                  <Icon type="user" />
                  <span>用户管理</span>
                </span>
              }
            >
              <Menu.Item
                key="3"
                onClick={this.hanldeMenuLink.bind(this, "/user-manage/list")}
              >
                用户列表
              </Menu.Item>
              <Menu.Item
                key="4"
                onClick={this.hanldeMenuLink.bind(this, "/user-manage/auth")}
              >
                权限设置
              </Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        {/* 按钮点击时 传入参数 路径 */}
        <Layout>
          <Header className="header" />

          <Content className="content">
            {/* 上面点击时 传入对应的参数 */}
            <Switch>
              <Route
                path="/user-manage/list"
                component={UserManageList}
              ></Route>
              <Route
                path="/user-manage/auth"
                component={UserManageAuth}
              ></Route>
              <Route path="/" component={Welcome}></Route>
            </Switch>
          </Content>
        </Layout>
      </Layout>
    );
  }

  /**
   * 菜单项点击
   */
  hanldeMenuLink = path => {
    //   this表示此组件 上面有 history location match
    //console.log(this);
    this.props.history.push(path);
  };
}

export default BaseLayout;
